<template>
  <div class="app-container">
    <!--操作按钮-->
    <div style="padding-bottom: 30px;" class="operation_container">
      <ul>
        <li><el-button size="mini" @click="handleCancel">返回</el-button></li>
      </ul>
    </div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="基本信息" name="1">
        <cus-section class="b-cells" title="基本信息" m-color="#46CDCF" content-height="auto">
          <flex-box :gutter="0" flex-wrap="wrap" style="padding: 10px 8px 0;">
            <flex-box-item :span="0.5" class="b-cell">
              <flex-box align-items="stretch" class="b-cell-b">
                <div class="b-cell-name">客户编码：</div>
                <div class="b-cell-value">{{data.customerNo}}</div>
              </flex-box>
            </flex-box-item>
            <flex-box-item :span="0.5" class="b-cell">
              <flex-box align-items="stretch" class="b-cell-b">
                <div class="b-cell-name">收货人名称：</div>
                <div class="b-cell-value">{{data.consigneeName}}</div>
              </flex-box>
            </flex-box-item>
            <flex-box-item :span="0.5" class="b-cell">
              <flex-box align-items="stretch" class="b-cell-b">
                <div class="b-cell-name">所在城市：</div>
                <div class="b-cell-value">
                  {{ data.departureIdList }}
                </div>
              </flex-box>
            </flex-box-item>
            <flex-box-item :span="0.5" class="b-cell">
              <flex-box align-items="stretch" class="b-cell-b">
                <div class="b-cell-name">地址：</div>
                <div class="b-cell-value">{{data.consigneeCompanyAddress}}</div>
              </flex-box>
            </flex-box-item>
            <flex-box-item :span="0.5" class="b-cell">
              <flex-box align-items="stretch" class="b-cell-b">
                <div class="b-cell-name">联系人：</div>
                <div class="b-cell-value">{{data.linkMan}}</div>
              </flex-box>
            </flex-box-item>
            <flex-box-item :span="0.5" class="b-cell">
              <flex-box align-items="stretch" class="b-cell-b">
                <div class="b-cell-name">联系人电话：</div>
                <div class="b-cell-value">{{data.linkManMobile}}</div>
              </flex-box>
            </flex-box-item>
          </flex-box>
        </cus-section>
      </el-tab-pane>

      <el-tab-pane label="收货地址配置" name="3">
        <div class="app-container">
          <!-- 高级查询 -->
          <!-- <el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">
            <el-form-item label="名称:">
              <el-input v-model="TbUserWarehouseManagerMapParams.userName"  size="small" placeholder="请输入仓库编码" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form> -->

          <!-- 工具栏 -->
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            </el-col>

            <right-toolbar :show-search.sync="searchVisible" @queryTable="handleQuery" />
          </el-row>

          <!-- 数据列表 -->
          <el-table v-loading="loading" :data="page1.records" highlight-current-row>
            <!-- <el-table-column type="selection" width="55" align="center" /> -->

            <el-table-column label="收货城市" align="center" prop="aeraDesc" />
            <el-table-column label="收货地址" align="center" prop="deliveryAddress" />
            <!-- <el-table-column label="收货仓库" align="center" prop="warehouseCode" /> -->
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleRemove2(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <pagination v-show="page1.total>0" :total="page1.total" :page.sync="page1.current" :limit.sync="page1.pageSize" @pagination="handleQuery" />

          <!-- 仓库管理人员/修改对话框 -->
          <el-dialog :title="customerConsigneeDeliveryAddressDialog.title" :visible.sync="customerConsigneeDeliveryAddressDialog.visible" :close-on-click-modal="false" width="400px" append-to-body>
            <el-form ref="customerConsigneeDeliveryAddressForm" :model="customerConsigneeDeliveryAddressFormData" :rules="customerConsigneeDeliveryAddressFormRules" label-width="100px">

              <el-form-item label="所在城市：" prop="aeraDesc">
                 <el-cascader
                   v-model="customerConsigneeDeliveryAddressFormData.aeraDesc"
                   :options="options.locationList"
                   :props="{ expandTrigger: 'hover', label: 'locationName', value: 'id' }"
                 />
               </el-form-item>

              <el-form-item label="收货地址:" prop="deliveryAddress">
                <el-input v-model="customerConsigneeDeliveryAddressFormData.deliveryAddress"
                placeholder="请输入收货地址"  style="width: 78%;"/>
              </el-form-item>

              <!-- <el-form-item label="仓库:" prop="warehouseCode">
                <el-select v-model="customerConsigneeDeliveryAddressFormData.warehouseCode" filterable clearable placeholder="请选择">
                	<el-option v-for="item in  options.warehouseList" :key="item.id" :label="item.warehouserName"
                		:value="item.id">
                	</el-option>
                </el-select>
              </el-form-item> -->

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="confirmCustomerConsigneeDeliveryAddressDialog">确 定</el-button>
              <el-button @click="resetCustomerConsigneeDeliveryAddressDialog">取 消</el-button>
            </div>
          </el-dialog>

        </div>
      </el-tab-pane>



    </el-tabs>
  </div>
</template>

<script>
import appConstant from '@/constant/AppConstant'
import WarehouseApi from '@/api/basic/WarehouseApi'
import TbWmsLocationApi from '@/api/web/TbWmsLocationApi'
import WarehouseAreaApi from '@/api/web/WarehouseAreaApi'
import BaseInfoMixin from '@/mixins/BaseInfo'
import UserApi from '@/api/system/UserApi'
import CustomerConsigneeApi from '@/api/basic/CustomerConsigneeApi'
import CustomerConsigneeDeliveryAddressApi from '@/api/basic/CustomerConsigneeDeliveryAddressApi'
import TreeUtils from '@/utils/TreeUtils'
import LocationApi from '@/api/basic/LocationApi'

const defaultcustomerConsigneeDeliveryAddressFormData = {
  warehouseCode: null,
  deliveryAddress: null,
  aeraDesc: null,
  ccustcode: null
}

export default {
  components: {

  },
  mixins: [BaseInfoMixin],
  filters: {
    warehouseTypeFilter(item) {
      const values = appConstant.genWarehouseTypeOptions.filter(value => value.key === item)
      if (values && values.length > 0) {
        return values[0].label
      } else {
        return ''
      }
    }
   },
  data() {
    return {
      activeName: '1',
      selects: {},
      options: {
        userSelect: null,
        warehouseList: null,
        locationList: []
      },
      operation: undefined,
      data: {
        isValid: appConstant.Y
      },
      queryParams: {
        ccustcode: null,
        isValid: this.$constant.Y
      },
      locationQueryParams: {
        areaId: null,
        isValid: this.$constant.Y
      },
      TbUserWarehouseManagerMapParams: {
        userName: null,
        isValid: this.$constant.Y
      },
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      page1: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      locationPage: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      warehouseAreaFormDialog: {
        title: '',
        visible: false
      },
      customerConsigneeDeliveryAddressDialog: {
        title: '',
        visible: false
      },
      customerConsigneeDeliveryAddressFormData: Object.assign({}, defaultcustomerConsigneeDeliveryAddressFormData),
      customerConsigneeDeliveryAddressFormRules: {},
      loading: false,
      searchVisible: true,
      multipleSelection: [],
      isSingle: true,
      isMultiple: true
    }
  },
  created() {
    this.initForm()
    this.loadSelects()
    this.handleQuery()
  },
  methods: {
    initForm() {
      const id = this.$route.params.id
      CustomerConsigneeApi.get(id).then(response => {
        console.log(response)
        this.data = response.data
      })
    },
    loadSelects() {

     WarehouseApi.list({warehouseType:'center'}).then(res =>{
       this.options.warehouseList = res.data
     })

     LocationApi.list().then(response => {
        this.options.locationList = TreeUtils.list2Tree(response.data)
      })
    },
    handleQuery() {
      this.loading = true

      this.queryParams.ccustcode = this.data.id
      CustomerConsigneeDeliveryAddressApi.page(this.queryForm,this.page1).then(res =>{
        this.page1.records = res.data.records
        this.page1.total = res.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection
      this.isSingle = selection.length !== 1
      this.isMultiple = !selection.length
    },
    handleAdd(){
       this.openCustomerConsigneeDeliveryAddressDialog()
    },
    openCustomerConsigneeDeliveryAddressDialog(id) {
      this.resetCustomerConsigneeDeliveryAddressDialog()
      this.customerConsigneeDeliveryAddressDialog.visible = true
      if (id) {
        this.customerConsigneeDeliveryAddressDialog.title = '收货地址-修改'
        CustomerConsigneeDeliveryAddressApi.get(id).then(response => {
          
          this.customerConsigneeDeliveryAddressFormData = {
            ...this.customerConsigneeDeliveryAddressFormData,
            ...response.data
          }
          
          this.customerConsigneeDeliveryAddressFormData.aeraDesc = this.customerConsigneeDeliveryAddressFormData.aeraDesc.split(",")
        })
      } else {
        this.customerConsigneeDeliveryAddressDialog.title = '收货地址-添加'
      }
    },
    handleEdit(row) {
      const id = row.id || this.multipleSelection.map(item => item.id)[0]
      this.openCustomerConsigneeDeliveryAddressDialog(id)
    },
    confirmCustomerConsigneeDeliveryAddressDialog() {
      this.$refs['customerConsigneeDeliveryAddressForm'].validate(valid => {
        if (valid) {
           this.handleLocationChange(this.customerConsigneeDeliveryAddressFormData.aeraDesc)

          if (this.customerConsigneeDeliveryAddressFormData.id) {
            CustomerConsigneeDeliveryAddressApi.edit(this.customerConsigneeDeliveryAddressFormData).then(response => {
              this.$message.success('修改成功')
              this.resetCustomerConsigneeDeliveryAddressDialog()
              this.handleQuery()
            })
          } else {
            this.customerConsigneeDeliveryAddressFormData.ccustcode = this.data.id
            CustomerConsigneeDeliveryAddressApi.add(this.customerConsigneeDeliveryAddressFormData).then(response => {
              this.$message.success('添加成功')
              this.resetCustomerConsigneeDeliveryAddressDialog()
              this.handleQuery()
            })
          }
        }
      })
    },
    resetCustomerConsigneeDeliveryAddressDialog() {
      this.customerConsigneeDeliveryAddressDialog = {
        title: '',
        visible: false
      }
      this.customerConsigneeDeliveryAddressFormData = Object.assign({}, defaultcustomerConsigneeDeliveryAddressFormData)
      this.resetForm('customerConsigneeDeliveryAddressForm')
    },
    resetQuery() {
      this.page1.current = 1
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleRemove2(row) {
      const ids = row.id
      this.$confirm('是否确认删除数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return CustomerConsigneeDeliveryAddressApi.remove(ids)
      }).then(() => {
        this.handleQuery()
        this.$message.success('删除成功')
      })
    },
    handleLocationChange(val){
      let str =""
      for(let i in val){
        if(i==0){
          str+=val[i]
        }else{
          str+=","+val[i]
        }
      }
      this.customerConsigneeDeliveryAddressFormData.aeraDesc= str
    },
    handleCancel() {
      this.$router.go(-1)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .b-cont {
    position: relative;
    padding: 0 50px 20px 20px;
  }
  .b-cells {
    margin-top: 25px;
  }
  .locationList{
    padding-bottom:50px;
  }
  .b-cell {
    padding: 0 10px;
    overflow: hidden;
    .b-cell-b {
      width: auto;
      padding: 8px;
      .b-cell-name {
        width: 110px;
        margin-right: 10px;
        font-size: 13px;
        flex-shrink: 0;
        color: #777;
      }
      .b-cell-name2 {
        width: 100%;
        margin-right: 10px;
        font-size: 13px;
        flex-shrink: 0;
        color: #777;
      }
      .b-cell-value {
        font-size: 13px;
        color: #333;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
      .b-cell-foot {
        flex-shrink: 0;
        display: block;
        width: 15px;
        height: 15px;
        margin-left: 8px;
      }
    }
  }

  .f-item {
    padding: 3px 0;
    height: 25px;
    .f-img {
      position: block;
      width: 15px;
      height: 15px;
      padding: 0 1px;
      margin-right: 8px;
    }
    .f-name {
      color: #666;
      font-size: 12px;
      margin-right: 10px;
    }
  }
</style>
